<template>
    <div>
        <div 
            class="rank-item"
            v-for="item in itemData"
            :key="item.bookId" 
            @click="gotoBookDetail(item.bookId,item.bookName)">
            <div class="photo">
                <img :src="item.coverUrl" alt="">
            </div>
            <div class="book-info">
                <div class="title clearfit">
                    <span class="l">{{item.bookName}}</span> 
                    <!-- 若是前三，重绘颜色 -->
                    <span 
                        :class="['r',item.No==1?'r1':'',item.No==2?'r2':'',item.No==3?'r3':'']">
                        {{item.No}}
                    </span>
                </div>
                <div class="author clearfit"><span class="l">{{item.authorName}}</span> <span class="r">{{item.categoryName}}</span></div>
                <div class="serise">
                    <div>更新至：<span>{{item.updteChapterName}}</span></div>
                </div>
                <div class="month-num"><i class="fa fa-area-chart" aria-hidden="true"></i> 月票数：{{item.number}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "rankItem",
    props: {
        itemData: Array
    },
    methods: {
        gotoBookDetail(book_id,book_name) {
            // console.log('go to book detail');
            this.$router.push({
                path:'/book_detail',
                query:{bookId:book_id,bookName: book_name}
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.rank-item {
    padding: 8px 14px;
    border-bottom: 1px solid #ccc;
    display: flex;
    font-size: 13px;
    background-color: #fafafa;
    color: #888;
    .photo {
        img {
            width: 74px;
            height: 98px;
            margin-right: 10px;
        }
    }
    .book-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
            font-size: 16px;
            color: black;
            .r {
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                color: #AAAAAA;
                background-color: #F1F1F1;
                border-radius: 3px;
            }
            .r1 {
                color:white;background-color: #ED5565;
            }
            .r2 {
                color:white;background-color: #E28D29;  
            }
            .r3 {
                color:white;background-color: #9FC575;
            }
        }
        i {
            color: #FF5555;
        }
        .serise {
            span {
                color: black;
            }
        }
    }
}
</style>